import React, { useState } from "react";
import { Select, Table } from "antd";
import style from "./PurchaseTable.module.css"

export default function PurchaseTable(props) {
  const {
    tableColumns,
    data,
    multSelect,
    multSelectChange,
    tableMultOperationSelectOption,
    tableDataReq,
    tableDataTotal,
  } = props;

  const [loading, setLoading] = useState(false);
  const start = (option) => {
    setLoading(true);
    setTimeout(() => {
      multSelectChange([]);
      setLoading(false);
    }, 1000);
  };
  const onSelectChange = (newSelectedRowKeys) => {
    // console.log("selectedRowKeys changed: ", newSelectedRowKeys);
    multSelect(newSelectedRowKeys);
  };
  const rowSelection = {
    multSelect,
    onChange: onSelectChange,
  };
  // const hasSelected = multSelect.length > 0;

  return (
    <>
      <Table
        className={style.purchaseTable}
        rowSelection={rowSelection}
        columns={tableColumns}
        dataSource={data}
        pagination={{
          total: tableDataTotal,
          onChange: (value) => {
            // console.log("当前页:", value);
            tableDataReq(value);
          },
          showTotal: (tableDataTotal) => {
            return (
              <span
                style={{
                  fontSize: 14,
                  color: "#264653",
                  fontFamily: "微软雅黑",
                }}
              >
                共{tableDataTotal}条
              </span>
            );
          },
        }}
      />
      <Select
        className={style.purchaseSelect}
        defaultValue="批量操作"
        style={{
          width: 120,
        }}
        onChange={start}
        loading={loading}
        options={tableMultOperationSelectOption}
      />
    </>
  );
}
